<script setup lang="ts">
import { ref } from "vue";

const tags = ["待确认", "待提车", "已完成", "已退款", "筛选"];
const activeTag = ref("待确认");

function selectActive(tag: string) {
  activeTag.value = tag;
}
function toDetail(id: string) {
  uni.navigateTo({
    url: `/pages/order/detail/index?id=${id}`,
  });
}
</script>

<template>
  <view class="content">
    <uni-nav-bar
      dark
      :fixed="true"
      background-color="#ffffff"
      status-bar
      title="我的订单"
      color="##393D40"
    />

    <view class="flex h-[128rpx] items-center justify-around bg-white">
      <view
        v-for="tag in tags"
        :key="tag"
        class="flex h-full items-center"
        @click="selectActive(tag)"
      >
        <view
          v-if="activeTag === tag"
          class="flex flex-col items-center font-medium text-[#0273bf]"
        >
          <view class="text-[34rpx]"> 8888 </view>
          <view class="text-[22rpx]">
            {{ tag }}
          </view>
        </view>
        <view v-else>
          {{ tag }}
        </view>
      </view>
    </view>

    <view
      class="mx-[20rpx] my-[24rpx] rounded-[16rpx] bg-white"
      @click="toDetail('123')"
    >
      <view
        class="mx-[20rpx] flex justify-between border-b border-[#EEEEEE] py-[24rpx] text-[28rpx]"
      >
        <view> 江西好再来汽车贸易有限公司 </view>
        <view class="flex">
          <view class="text-[#919BA1]"> 网销： </view>张三思
        </view>
      </view>

      <view class="flex justify-between px-[20rpx] py-[24rpx] text-[28rpx]">
        <view> L00001250712001 </view>
        <view class="text-[#0273BF]"> 待确认 </view>
      </view>

      <view class="flex justify-between px-[20rpx] py-[24rpx] text-[28rpx]">
        <view class="mr-[78rpx] truncate text-[34rpx]">
          本田 思域 2025123122321款 1.5T CVT 240
        </view>
        <view class="text-[#0273BF]"> ×1 </view>
      </view>
      <view class="px-[20rpx] py-[24rpx] text-[28rpx] text-[#919BA1]">
        牛奶白 丨 迷雾紫 丨 指导价：14.59万元
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped></style>
